<template>
  <view class="view">
    <!-- <zm-list ref="list" :options="options" @query="handleGetData">
      <view v-for="(item, index) in list" :key="index" class="list-item">{{ index }}</view>
    </zm-list> -->
    <swiper class="swiper" circular>
      <swiper-item>
        <zm-list ref="list" :options="options" @query="handleGetData">
          <view v-for="(item, index) in list" :key="index" class="list-item">{{ index }}</view>
        </zm-list>
      </swiper-item>
      <swiper-item>
        <zm-list ref="list" :options="options" @query="handleGetData">
          <view v-for="(item, index) in list" :key="index" class="list-item">{{ index }}</view>
        </zm-list>
      </swiper-item>
      <swiper-item>
        <zm-list ref="list" :options="options" @query="handleGetData">
          <view v-for="(item, index) in list" :key="index" class="list-item">{{ index }}</view>
        </zm-list>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      options: {
        size: 3
      }
    }
  },
  methods: {
    handleGetData({ size, type, success }) {
      if (type == "load") {
        setTimeout(() => {
          this.list = [...this.list, ...Array.from({ length: size }, (_, i) => i)]
          success({ list: this.list, total: 50 })
        }, 0)
      }
      if (type == "refresh") {
        setTimeout(() => {
          this.list = Array.from({ length: size }, (_, i) => i)
          success({ list: this.list, total: 50 })
        }, 1000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.view {
  width: 100vw;
  height: 100vh;
}
.swiper {
  min-height: 100vh;
}
.list-item {
  margin: 10px;
  height: 100px;
  display: flex;
  font-size: 32rpx;
  align-items: center;
  border-radius: 10px;
  justify-content: center;
  background-color: #fff;
}
</style>
